<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="lib/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/demo-NBA.css" />
		<title></title>
	</head>
	<body>
		<div class="tod-hot">	
		</div>
		<div class="fix" style="display:block;">
			<i class="le"></i>
			<div class="cen">
				<h2>查看比赛完整数据</h2>
				<p>下载腾讯体育</p>
			</div>
			<i class="la"></i>
			<i class="ri">立即下载</i>	
		</div>
		<div class="global">
			<header>
				<a class="tit-icon"></a>
				<a class="right click-head"></a>
				<div style="clear:both;"></div>
			</header>
			<div class="fiden">
				<div class="add"></div>
				<ul class="botUl">
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
				</ul>
				<div class="add"></div>
			</div>
			<section>
				<div class="choose">
					<div class="tit-out">
						<a href="demo.html">体育</a>
						<a class="cur">NBA</a>
					</div>
				</div>
				<div class="banner">
				</div>
			</section>
			<div class="MainInner">
				<a class="pub">
					<img src="http://inews.gtimg.com/newsapp_ls/0/473791006_150120/0" />
					<h2>孙杨后程发力 夺200米自由泳金牌</h2>
					<p>孙杨夺冠腾讯体育8月9日2016年里约奥运会游...</p>
					<span class="discuss">
						<i class="spec">专题</i>
						<span><i class="pub-i"></i>12331</span>
					</span>
				</a>
				<a class="pub">
					<img src="http://inews.gtimg.com/newsapp_ls/0/473791006_150120/0" />
					<h2>孙杨后程发力 夺200米自由泳金牌</h2>
					<p>孙杨夺冠腾讯体育8月9日2016年里约奥运会游...</p>
					<span class="discuss">
						<i class="spec">专题</i>
						<span><i class="pub-i"></i>12331</span>
					</span>
				</a>
				<a class="pub">
					<img src="http://inews.gtimg.com/newsapp_ls/0/473791006_150120/0" />
					<h2>孙杨后程发力 夺200米自由泳金牌</h2>
					<p>孙杨夺冠腾讯体育8月9日2016年里约奥运会游...</p>
					<span class="discuss">
						<i class="spec">专题</i>
						<span><i class="pub-i"></i>12331</span>
					</span>
				</a>
				<a class="pub">
					<img src="http://inews.gtimg.com/newsapp_ls/0/473791006_150120/0" />
					<h2>孙杨后程发力 夺200米自由泳金牌</h2>
					<p>孙杨夺冠腾讯体育8月9日2016年里约奥运会游...</p>
					<span class="discuss">
						<i class="spec">专题</i>
						<span><i class="pub-i"></i>12331</span>
					</span>
				</a>
			</div>
			<div class="more">
				<p>点击获取更多</p>
			</div>
			<div class="bot">
				<ul class="botUl">
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
					<li><a>首页</a></li>
				</ul>
			</div>
			<footer>
				<a class="cen" href="demo-enter.html"><span>[登录]</span></a>
				<p><a class="feedback">反馈</a><a class="ba">电脑版</a></p>
				<a class="co">Copyright © 1998 - 2016 Tencent. 腾讯科技（北京）有限公司 All Rights Reserved</a>
			</footer>
		</div>

	</body>
	<script src="js/demo-pub.js"></script>
	<script>
		var imgAll = [{imgSrc:"http://inews.gtimg.com/newsapp_ls/0/481979431_640330/0",des:"					詹姆斯生涯绝杀球收录 突破乔治上篮成经典"},
					{imgSrc:"http://inews.gtimg.com/newsapp_ls/0/481646894_640330/0",des:"詹皇三年1亿美元续约 新赛季第1高薪"},
					{imgSrc:"http://inews.gtimg.com/newsapp_ls/0/488447410_640480/0",des:"1亿去哪了？詹皇捐近半工资资助大学生"}];
		(function banner(imgAll){
			var startX,
				endX,
				distanceX,
				stop,
				index = 1,
				banner = document.querySelector('.banner'),
				imgs,
				selector;
				createDOM();
				ems = selector.querySelectorAll('em'),
				bannerwidth = banner.offsetWidth,
				le = parseInt(imgs.style.left);
				ems[0].classList.add("cur");
			function createDOM(){
				imgs = document.createElement("div"),
				selector = document.createElement("div");
				banner.appendChild(selector);
				banner.appendChild(imgs);
				imgs.style = "left:0rem;";
				imgs.className = "imgs";
				selector.className = "selector";
				imgAll.map(function(list,index){
								var ad = document.createElement("a"),
									imgCr = document.createElement("img"),
									em = document.createElement("em"),
									p = document.createElement("p");
									ad.className = "pub-a";
									ad.appendChild(p);
									ad.appendChild(imgCr);
									imgs.appendChild(ad);
									selector.appendChild(em);
									p.appendChild(document.createTextNode(list.des));
									imgCr.src = list.imgSrc;
								}
				);	

			}
			
			function slider(){
				imgs.addEventListener('touchstart' ,function(e){
					startX = e.touches[0].clientX;
					le = parseInt(imgs.style.left);
				});
				imgs.addEventListener('touchmove' ,function(e){
					distanceX = e.touches[0].clientX - startX;
					imgs.style.left = le + distanceX / 16 +"rem";
					if(parseInt(imgs.style.left) > 0){
						imgs.style.left = "0";
					}else if(parseInt(imgs.style.left) < -40){
						imgs.style.left ="-40rem";
					}		
				});
				imgs.addEventListener('touchend' ,function(e){
					endX = e.changedTouches[0].clientX;
					if (Math.abs(distanceX) > bannerwidth / 2) {
						if (distanceX > 0) {
							imgs.style.left = le + 20 + "rem";
						}else{
							imgs.style.left = le - 20 + "rem";
						}
						console.log(parseInt(imgs.style.left));
						if(parseInt(imgs.style.left) <-40){
							imgs.style.left = "-40rem";
							
						}else if(parseInt(imgs.style.left) > 0){
							imgs.style.left = "0";
						}	
					}else{
						imgs.style.left = le + "rem";
					}
					index =Math.abs(parseInt(imgs.style.left) / 20);
					if(index > 2){
					index = 0;
					}else if(index < 0){
						index = 2;
					}
					console.log(index);
					setContact();
					clearTimeout(stop);
					setTime();
				});
			}
			function setContact(){
				for (var i = 0,len=ems.length;i < len ;i++ ) {
					ems[i].classList.remove('cur');
				}
				ems[index].classList.add('cur');			
			}
			function setTime(){
				stop = setInterval(function(){
				if (index >2) {
					index = 0;
					}
					imgs.style.left = (index)*-20 + "rem";
					setContact();
					index++;
				},2000);
			}
			setTime();
			slider();	
		})(imgAll);
	</script>
</html>
